<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- v-if -->
    <h1 v-if="awesome">Vue is awesome!</h1>

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    <!-- v-else -->
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>

    <!-- v-else-if -->
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>

    <div id="app">
        <!-- 渲染多个元素，可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。 -->
        <template v-if="true">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>

        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
    </div>
    
    <!-- v-show  
        v-show 的元素始终会被渲染并保留在 DOM 中;
        v-show 不支持 <template> 元素，也不支持 v-else;
        v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销;
    -->
    <h1 v-show="ok">Hello!</h1>
</body>
    <script>
        let vm = new Vue({
            el: "#app",
        });
    </script>
</html>